<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">html5 audio MusicPlayer</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8; font-family:Arial;color:#333;}
.clear { clear:both}
body { background:#f5f5f5;}
.music_player {display:block;width:360px;margin:9px auto;border:1px solid #ccc;border-radius:3px; background:#fff;}
.music_player audio { display:block;height:0; overflow:hidden;}

.music_player_btns {clear:both;margin:5px;}
.music_player_btns span { padding:2px 10px;background:#ccc;cursor:pointer;border-radius:5px;}
.music_player_btns span.now,.music_player_btns span:hover { background:#069;color:#fff;}
.music_player_volume { float:left;width:48%;}
.music_player_volume strong { float:left; padding:0 5px}
.music_player_volume span {background:#ccc;height:5px;width:100px; overflow:hidden;display:block;margin-top:9px;border-radius:3px;cursor:pointer; float:left;}
.music_player_volume span em { display:block; height:5px; background:#069;}
.music_player_muted { float:left;cursor:pointer}
.music_player_muted span { text-decoration:line-through;color:#999}

.music_player_prog_data { text-align:center}
.music_player_desc { background:#069;border-bottom:2px solid #fff;color:#fff;padding:3px;}
.music_player_prog {height:5px;width:350px;overflow:hidden; background:#ccc;border-radius:3px;cursor:pointer;margin:0 5px;}
.music_player_prog em { background:#069;line-height:90px; height:5px;display:block;}

.music_player_songs {background:#fff;border-top:1px solid #ccc}
.music_player_songs a {display:block;text-decoration:none;padding:1px 5px}
.music_player_songs a:hover { background:#069;color:#fff;}
.music_player_songs li {border-bottom:1px solid #fff;}
.music_player_songs li.now {background:#069;}
.music_player_songs li.now a {color:#fff;}

.addSongs { cursor:pointer;color:#069; margin:5px;}
</style>
</head>
<body>
<section class="music_player">
	<audio id="musicBox" ontimeupdate="MusicPlayer.Funs.showProg()" onerror="MusicPlayer.Funs.Error()" onended="MusicPlayer.Funs.playEnd()"></audio>
</section>
<script type="text/javascript" src="funcs.js"></script>
<script type="text/javascript" src="MusicPlayer.js"></script>
<script type="text/javascript">
var SongInfo = [
{"singer":"林海","name":"琵琶语","url":"http://newsms.netor.com/m/grieve/stores/o/200701/200701m70505snet0r28212415.mp3"},
{"singer":"尺八","name":"宙","url":"http://webdisk.yyjxkj.com/angel/aini/%E5%AE%99.mp3"},
{"singer":"宗次亮","name":"故乡的原风景","url":"http://www.kf-cn.com/cn/miimg/sound.mp3"},
{"singer":"Matthew Lien","name":"Bressanon","url":"http://lottery.sz.net.cn/images/2006-08/18/570803181102890167453.mp3"},
{"singer":"Matthew Lien","name":"Flying Squirrel Creek","url":"http://www.yukonbooks.com/shop/images-detail/d_19575.mp3"},
{"singer":"cara dillon","name":"craigie hill","url":"http://friends.chyangwa.com/kelly/song2/Craigie%20Hill.mp3"},
{"singer":"scorpions","name":"still loving you","url":"http://3393.voxcdn.com/classicrock/scorpions_crgold014_stilllovingyou.mp3"},
{"singer":"def leppard","name":"Long long way to go","url":"http://space.wzdsb.net/space_beijiguang/Longlongwaytogo.mp3"},
{"singer":"sinead o'connor","name":"a perfect indian","url":"http://rm.sina.com.cn/wm/VZ200807031731477717VK/music/MUSIC0807031732007910.mp3"}
]


MusicPlayer.Obj = document.getElementById("musicBox");
var SongList =  document.createElement("div");
	SongList.id = 'music_player_songs';
	SongList.className = 'music_player_songs';
	SongList.innerHTML = CreateSongList(SongInfo);
	insertAfter(SongList,MusicPlayer.Obj);
MusicPlayer.List = document.getElementById("music_player_songs");
MusicPlayer.Para.Index = 1;
MusicPlayer.Init();


function CreateSongList(json){
	var json = json2Obj(json);
	var len = json.length;
	var Data = [];
	var tempH = '<ul>';
	var tempB = '<li><a href="{url}">{singer} -- {name}</a></li>';
	var tempF = '</ul>';
	for (var n=0;n<len;n++){
		Data.push({singer:json[n].singer ,name:json[n].name, url:json[n].url});	
	}
	var html = [tempH,substitute(tempB,Data),tempF].join("");
	return html;
}
</script>
</body>

</html>
